<template>
  <div
    class="detail-area"
    @click="clickArea"
    v-if="area && area.name && area.name.name">
    <div class="area">
      {{ area.name.name }}
    </div>
  </div>
</template>

<script>
import config from '@/config/code'
export default {
  name: 'DetailArea',
  props: ['area'],
  methods: {
    clickArea() {
      // area url
      const area = +this.area.area_id
      // if (area > 0 && [1, 2, 3, 4, 7].includes(area)) {
      //   this.$router.push(`/product/area/${area}`)
      // } else if (area === 5) {
      //   this.$router.push('/group')
      // }
      if (area === config.area.group) {
        this.$router.push('/group')
      } else {
        this.$router.push(`/product/area/${area}`)
      }
    }
  }
}
</script>

<style scoped lang="stylus">
.detail-area
  margin 10px
  padding 15px
  background white
  border-radius 10px
  .area
    color red
    font-size 16px
    font-weight 700
  .group
    color $main_color
</style>
